<template>
    <div class="banner">
      <div class="wrap">
        <div class="desc">
          <h2 class="banner-title">微盟微站</h2>
          <p class="text">
            完全可视化拖拽
          </p>
          <p class="text">
            三分钟打造自己的小程序
          </p>
        </div>

        <div class="bottom">
          <a href="#" class="btn btn-big">免费注册</a>
          <a href="#" class="btn btn-big">
            扫码体验
            <img src="./down_ico.jpg" class="down-ico" alt="..." />
          </a>
        </div>

        <div class="banner-img">
          <img src="./banner.png" alt="banner" />
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {

    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .banner
    wh(100%, 500px)
    background-color: $slider-bg
    .wrap
      position: relative
      z-index: 1
      height: 100%
      .desc
        ltposition(40px, 118px)
        .banner-title
          sc(44px, $white)
          font-weight: bold
        .text
          margin-top: 10px
          line-height: 30px
          sc($font-large-x, $white)
      .bottom
        lbposition(40px, 100px)
        font-size: 0
        .btn
          position: relative
          &:first-child
            margin-right: 20px
          &:hover
            background-color: $white
            .down-ico
              display: block
          .down-ico
            display: none
            ltposition(-1px, 120%)
            width: 100%
            br(5px)

      .banner-img
        rtposition(0, 30px)
        font-size: 0
        transition: .4s ease
        img
          width: 100%
  @media(max-width:1200px)
    .banner
      .wrap
        .banner-img
            top: 90px
            width: 50%
</style>
